<template>
  <h1 style="text-align: center">销售信息查询</h1>
  <!--    查询条件-->
  <div class="findDiv">
    <el-col :span="24">客户：
      <el-input v-model="findObj.name"/>
    </el-col>
    <br>
    <el-col :span="24">起始日期：
      <el-input type="date" style="margin-top: 10px;" v-model="findObj.startDate"/>
    </el-col>
    <br>
    <el-col :span="24">结束日期：
      <el-input type="date" style="margin-top: 10px;" v-model="findObj.endDate"/>
    </el-col>
    <br>
    <el-button type="primary" style="margin: 0px 120px" @click="findByItem(1)">查询</el-button>
  </div>

  <!--  表格-->
  <div style="width: 100%;">
    <el-table :data="sellObj.records" style="width: 100%;font-size: 16px;">
      <el-table-column prop="client.name" label="客户名称" width="300"/>
      <el-table-column prop="user" label="销售员" width="300"/>
      <el-table-column prop="date" label="销售时间" width="300"/>
      <el-table-column prop="allMoney" label="订单总额" width="300"/>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button type="info" @click="findById(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
      <br>
    </el-table>
  </div>

  <!--    页码-->
  <el-pagination
      style="margin-top: 30px;margin-left: 20px"
      v-model:currentPage="sellObj.current"
      v-model:page-size="sellObj.size"
      background
      layout="prev, pager, next, jumper"
      :total="sellObj.total"
      @current-change="findByItem"
  />

  <!--    查看弹出框-->
  <el-dialog
      v-model="dialogVisible"
      title="采购信息详情"
      width="60%"
      center>
    <el-row>
      <el-col :span="12">
        <span style="margin:80px;line-height: 50px;font-size: 16px">客户名称</span><span
          style="font-size: 16px;margin-left: 16px;">{{ infoObj.name }}</span><br>
      </el-col>
      <el-col :span="9" style="margin-left: 60px;">
        <span style="margin:80px;line-height: 50px;font-size: 16px">销 售 员</span><span
          style="font-size: 16px;">{{ findSellBean.user }}</span><br>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <span style="margin:80px;line-height: 50px;font-size: 16px">销售日期</span><span
          style="font-size: 16px;margin-left: 10px;">{{ findSellBean.date }}</span><br>
      </el-col>
      <el-col :span="9" style="margin-left: 60px;">
        <span style="margin:80px;line-height: 50px;font-size: 16px">订单金额</span><span
          style="font-size: 16px;">{{ findSellBean.allMoney }}</span><br>
      </el-col>
    </el-row>
    <span style="margin:80px;line-height: 50px;font-size: 16px">送货地址</span><span
      style="font-size: 16px;margin-left: 20px;">{{ findSellBean.address }}</span><br>

    <!--      明细-->
    <div style="width: 100%;">
      <p style="font-size: 18px;margin: 20px 0px 10px 10px">出库物品明细</p>
      <el-table :data="listObj" style="width: 100%;font-size: 16px;">
        <el-table-column prop="product.name" label="商品名称" width="200"/>
        <el-table-column prop="product.brand" label="品牌" width="200"/>
        <el-table-column prop="sellMoney" label="成交价" width="200"/>
        <el-table-column prop="num" label="销售数量" width="200"/>
      </el-table>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false" style="margin: 20px 0">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      findObj: {},
      sellObj: {},
      findSellBean: [],
      infoObj: [],
      listObj: [],
      dialogVisible: false
    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/sell/findByItem", {params: this.findObj}).then(resp => {
        this.sellObj = resp.data;
      })
    },
    findById(id) {
      this.dialogVisible = true;
      axios.get("/project/sell/findById", {params: {id: id}}).then(resp => {
        this.findSellBean = resp.data;
        this.infoObj = this.findSellBean.client;
        this.listObj = this.findSellBean.sellInfo;
        console.log(this.listObj );
        console.log(this.infoObj )

      })
    },
  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>
.findDiv {
  position: absolute;
  width: 300px;
  padding: 20px 60px;
  margin-top: 370px;
  margin-left: 930px;
  border: 1px solid #c8c9cc;
  border-radius: 5px;
}
</style>